<template>
  <div class="singer" ref="singer">
    <category-list :categoryList="categoryList" @category-click="getSingerList"></category-list>
    <scroll :data="singerList" ref="scroll" class="wrapper">
      <div class="content">
        <singer-list :singerList="singerList"></singer-list>
      </div>
     </scroll>
     <van-loading type="spinner" vertical v-show="!singerList.length"
        >数据加载中...</van-loading
      >
  </div>
</template>

<script>
import { playListMixin } from '../common/js/mixin'
import CategoryList from '@/components/singer/Category'
import SingerList from '@/components/singer/List'
// better-scroll 组件
import Scroll from '@/components/base/Scroll'
export default {
  mixins: [playListMixin],
  components: {
    CategoryList,
    SingerList,
    Scroll
  },
  data () {
    return {
      // 歌手分类
      categoryList: {},
      // 歌手列表
      singerList: []
    }
  },
  methods: {
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      // list是个vue components，.$el取元素
      // console.log(this.$refs.singer)
      this.$refs.singer.style.bottom = bottom
      // console.log(this.$refs.singerlist.$el)
      this.$refs.scroll.refresh()
    },
    // 获取歌手分类
    async getCategoryList () {
      const {
        data: { data: res }
      } = await this.$http.get('/api/singer/category')
      this.categoryList = {
        // 性别
        sex: res.sex,
        // 区域
        area: res.area,
        // 类型
        genre: res.genre
      }
    },
    //  获取歌手列表
    async getSingerList (params) {
      // 将原有歌手列表清空 重新加载 这样可以出现加载效果
      this.singerList = []
      const {
        data: { data: res }
      } = await this.$http.get('/api/singer/list', { params })
      this.singerList = res.list
      // console.log(this.singerList)
    }
  },
  mounted () {
    setTimeout(() => {
      // 获取歌手分类
      this.getCategoryList()
      //  获取歌手列表
      this.getSingerList()
    }, 20)
  }
}
</script>

<style lang="stylus" scoped>
.singer {
  position:fixed;
  width: 100%;
  top: 88px;
  left:0;
  bottom:0;
  .wrapper {
    height calc(100% - 144px)
    overflow: hidden;
  }
  .van-loading {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}
</style>
